<template>
  <div class="common-layout">
    <el-container>
      <el-header style="padding-left: 47px; border-bottom: 3px solid #ebeef5; display: flex; align-items: center;">
        <el-text class="mx-1">用例生成器</el-text>
        <span style="margin-left: 90px">
          <el-text class="mx-1">{{ headerName }}</el-text> <!-- todo: headerName随着路由点击修改 -->
        </span>
      </el-header>
      <el-container>
        <!-- 导航区 -->
        <el-aside width="150px" style="border-right: 3px solid #ebeef5 ;">
          <el-menu default-active="1" class="el-menu-vertical-demo" router>
            <RouterLink to="/templateGeneration">
              <el-menu-item @click="handleTemplateGenerationClick">
                <el-icon>
                  <location />
                </el-icon>
                <span><el-text class="mx-1">模板生成</el-text></span>
              </el-menu-item>
            </RouterLink>
            <RouterLink to="/testGeneration">
              <el-menu-item @click="handleTestGenerationClick">
                <el-icon><icon-menu /></el-icon>
                <span><el-text class="mx-1">用例生成</el-text></span>
              </el-menu-item>
            </RouterLink>
            <RouterLink to="/testCaseDebugging">
              <el-menu-item @click="handleTestCaseDebuggingClick">
                <el-icon>
                  <document />
                </el-icon>
                <span><el-text class="mx-1">用例调试</el-text></span>
              </el-menu-item>
            </RouterLink>
            <RouterLink to="/testPlan">
              <el-menu-item @click="handleTestPlanClick">
                <el-icon>
                  <setting />
                </el-icon>
                <span><el-text class="mx-1">测试计划</el-text></span>
              </el-menu-item>
            </RouterLink>
            <RouterLink to="/systemConfiguration">
              <el-menu-item @click="handleSystemConfigurationClick">
                <el-icon>
                  <setting />
                </el-icon>
                <span><el-text class="mx-1">系统配置</el-text></span>
              </el-menu-item>
            </RouterLink>
          </el-menu>
        </el-aside>
        <!-- 展示区 -->
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
let headerName = ref('模板生成')


function handleTestGenerationClick() {
  headerName.value = '用例生成'
}

function handleTemplateGenerationClick() {
  headerName.value = '模板生成'
}

function handleTestCaseDebuggingClick() {
  headerName.value = '用例调试'
}

function handleTestPlanClick() {
  headerName.value = '测试计划'
}

function handleSystemConfigurationClick() {
  headerName.value = '系统配置'
}

</script>

<style scoped>
.el-text {
  color: rgb(28, 27, 27);
  font-size: 15px;
  font-weight: bold;
}
</style>
